import React, { memo, useCallback, useEffect, useState } from "react";
import { withRouter } from "react-router";
import queryString from 'query-string'
import './index.css'

const data = [
  {
    label: "店内订单",
    key: 1,
    icon: require('@/icons/order.svg').default,
    isMarginTop: true,
    path: '/order'
  },
  {
    label: "食物中心",
    key: 2,
    icon: require('@/icons/food.svg').default,
    isMarginTop: false,
    path: '/food'
  },
  {
    label: "分类中心",
    key: 3,
    icon: require('@/icons/cate.svg').default,
    isMarginTop: false,
    path: '/cate'
  },
  {
    label: "会员管理",
    key: 4,
    icon: require('@/icons/member.svg').default,
    isMarginTop: false,
    path: '/user'
  },
  {
    label: "设置",
    key: 5,
    icon: require('@/icons/setting.svg').default,
    isMarginTop: true,
    path: '/setting'
  },
  // {
  //   label: "去到味美佳鸡排",
  //   key: 6,
  //   icon: require('@/icons/fds.svg').default,
  //   isMarginTop: false,
  //   path: '?store=1',
  // },
  // {
  //   label: "去到左记甜品",
  //   key: 7,
  //   icon: require('@/icons/fds.svg').default,
  //   isMarginTop: false,
  //   path: '?store=2'
  // },
]

const Home = ({ history }) => {
  const [store, setStore] = useState('1')

  useEffect(() => {
    let isLogin = localStorage.getItem('isLogin')
    if (!isLogin) {
      history.push('/login')
    }
    console.log(history);
    let obj = queryString.parse(history.location.search)
    setStore(obj.store)
  }, [history.location.search])

  const gotopath = useCallback((path) => {
    console.log(path);
    // history.push(path)
    history.push(path)
  }, [store])

  const Home = memo(() => {
    return <>
      <div className="menu-lista">
        {data.map(mi => {
          if ((mi.key == 6 && store == '1') || (mi.key == 7 && store == '2')) {
            return null
          } else {
            return <div key={mi.key}>
              <div className="mla-item" onClick={() => gotopath(mi.path)} key={mi.key} style={mi.isMarginTop ? { marginTop: '10px', borderTop: '1px solid #ececec' } : {}}>
                <img className="mia-icon" src={mi.icon}></img>
                <div className="mia-name">{mi.label}</div>
                <img className="mia-right" src={require('@/icons/right.svg').default}></img>
              </div>
            </div>
          }
        })}
      </div>
      {/* <div className="bottom-title">
        您当前的位置：{store == '1' ? '味好佳鸡排店' : '左记甜品'}
      </div> */}
    </>
  }, [store])

  return <Home />;
};

export default withRouter(Home);
